<template>
    <el-card shadow="always">

        <!--1. 条件查询带添加-->
        <el-form :inline="true" :model="templateSearch" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="templateSearch.name" placeholder="模板名称" size="small"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="small">开始查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" plain size="small" @click="addUI">添加模板</el-button>
            </el-form-item>
        </el-form>


        <!--2. 数据展示-->
        <el-table
                :data="templates">
            <el-table-column
                    label="模板编号"
                    prop="id"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="模板名称"
                    prop="name"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="关联品牌"

                    align="center">
                <template slot-scope="scope">
                    {{handlerData(scope.row.brandIds,"text")}}
                </template>
            </el-table-column>
            <el-table-column
                    label="关联规格"
                    align="center">
                <template slot-scope="scope">
                    {{handlerData(scope.row.specIds,"text")}}
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="自定义扩展属性">
                <template slot-scope="scope">
                    {{handlerData(scope.row.customAttributeItems,"text")}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--3. 保存模板数据-->
        <el-dialog :title="template.id ? '修改模板' : '添加模板'" :visible.sync="dialogFormVisible">
            {{template}}
            <el-form :model="template">
                <el-form-item label="模板名称" :label-width="formLabelWidth">
                    <el-input v-model="template.name" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <el-form :model="template">
                <el-form-item label="关联品牌" :label-width="formLabelWidth">
                    <!--<el-input v-model="template.name" autocomplete="off"></el-input>-->
                    <el-select v-model="template.brandIds" multiple placeholder="请选择品牌" value-key="id">
                        <el-option
                                v-for="brand in brandList"
                                :key="brand.id"
                                :label="brand.text"
                                :value="brand">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联规格" :label-width="formLabelWidth">
                    <!--<el-input v-model="template.name" autocomplete="off"></el-input>-->
                    <el-select v-model="template.specIds" multiple placeholder="请选择规格" value-key="id">
                        <el-option
                                v-for="spec in specList"
                                :key="spec.id"
                                :label="spec.text"
                                :value="spec">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="扩展属性" :label-width="formLabelWidth">
                    <el-button type="danger" size="small" @click="template.customAttributeItems.push({})">新增扩展属性</el-button>
                    <el-table
                            :data="template.customAttributeItems"
                            style="width: 100%">
                        <el-table-column
                                label="属性名称"
                                align="center"
                                width="500">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.text"/>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="template.customAttributeItems.splice(scope.$index,1)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </el-card>
</template>

<script>
    import {findAll,save,delTemplate} from '@/api/templates'
    import {findAllBrands} from '@/api/brands'
    import {findAllSpecs} from '@/api/specs'

    export default {
        data() {
            return {
                templates: [],
                templateSearch: {},
                dialogFormVisible: false,
                template: {customAttributeItems:[],brandIds:[],specIds:[]},
                formLabelWidth: '100px',
                brandList: [],          // 品牌列表
                specList:[],            // 规格列表

            }
        },
        created() {
            //1. 查询所有的模板列表
            this.findAll()
            //2. 查询品牌列表
            this.findBrands()
            //3. 查询规格列表
            this.findSpecs()
        },
        methods: {
            //1. 查询模板列表
            findAll() {
                findAll().then(({data}) => {
                    this.templates = data.templates
                })
            },
            //2. 处理品牌及规格数据
            handlerData(list, key) {
                //2.1 将传入的json串转换为数组对象
                list = JSON.parse(list)
                //2.2 定义组装最后的结果字符串
                let result = ""
                //2.3 遍历上面的list数组，取出指定key
                list.forEach(a => {
                    result += a[key] + ","
                })
                result = result.substr(0, result.length - 1)
                return result
            },
            //3. 查询所有品牌列表
            findBrands() {
                findAllBrands().then(({data}) => {
                    console.log("data:", data)
                    let brandList = data.brands.map(brand => {
                            return {"id": brand.id, "text": brand.name}
                        }
                    )
                    this.brandList = brandList;
                })
            },
            //4. 查询所有规格列表
            findSpecs() {
                findAllSpecs().then(({data}) => {
                    console.log("data:",data)
                    let specs = data.specs.map(spec => {
                        return {"id":spec.id,"text":spec.specName}
                    })
                    this.specList = specs;
                })
            },
            //5. 显示添加或修改对话框
            addUI() {
                //5.1 清空表单中的数据
                this.template = {customAttributeItems: []}
                //5.2 显示对话框
                this.dialogFormVisible = true
            },
            //6. 提交表单
            save(){
                //6.1 处理保存的数据
                this.template.brandIds = JSON.stringify(this.template.brandIds)
                this.template.specIds = JSON.stringify(this.template.specIds)
                this.template.customAttributeItems = JSON.stringify(this.template.customAttributeItems)
                let data = JSON.stringify(this.template)

                console.log("template:",this.template.id)

                //6.2 鹕定url地址
                let url = '/template?cmd=add'
                if(this.template.id){
                    url =  '/template?cmd=update'
                }
                console.log("url:",url)
                //6.3 开始提交表单数据
                let _this = this
                save(url,data).then(({data})=>{
                    if(data.code === 0){
                        this.$message({
                            message: data.msg,
                            type: 'success',
                            onClose(){
                                _this.dialogFormVisible = false
                                _this.findAll()
                            }
                        });

                    }
                })
            },
            search() {

            },
            handleEdit(index, row) {
                console.log(index, row);
                this.template = row
                this.dialogFormVisible = true
                this.template.customAttributeItems = JSON.parse(row.customAttributeItems)
                this.template.specIds = JSON.parse(row.specIds)
                this.template.brandIds = JSON.parse(row.brandIds)
            },
            //删除模板
            handleDelete(row) {
               //1. 得到要删除的模板id
               let id = row.id
               let _this = this
               //2. 提交删除
                this.$confirm(`真的要删除模板 ${row.name}吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delTemplate(id).then(({data})=>{
                        if(data.code === 0){
                            this.$message({
                                message: data.msg,
                                type: 'success',
                                onClose(){
                                    _this.findAll()
                                }
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>
<style>
    .el-card {
        width: 80% !important;
        margin: 0 auto !important;
    }
</style>
